<template>
	<view class="contactus">
		<view class="contactus-view" v-for="(item,index) in list">
			<image :src="item.img_text"></image>
			<view class="contactus-view-view">
				<view class="contactus-view-view-title">{{item.name}}</view>
				<view class="contactus-view-view-v2">地址：{{item.site}}</view>
				<view class="contactus-view-view-v2">联系方式：{{item.phone}}</view>
				
				<view class="contactus-view-view-v3">
					<view class="contactus-view-view-v4 yuyue" @click="urlClick(item.id)">
						<image src="../../static/yuyue.png"></image>
						<view>预约</view>
					</view>
					<view class="contactus-view-view-v4 bohao" @click="bohaoClick(item.phone)">
						<image src="../../static/bohao.png"></image>
						<view>拨号</view>
					</view>
					<view class="contactus-view-view-v4 map" @click="mapClick(item)">
						<image src="../../static/daohan.png"></image>
						<view>地图</view>
					</view>
					
				</view>
			</view>
		</view>
		
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list : []
			}
		},
		onLoad() {
			this.getall();
		},
		methods: {
			mapClick(e){
				var  lng  = e.lng;
				var  lat  = e.lat;
				wx.openLocation({
				  latitude: Number(lat), // 纬度，浮点数，范围为90 ~ -90
				  longitude: Number(lng), // 经度，浮点数，范围为180 ~ -180。
				  name: e.name, // 位置名
				  address: e.site, // 地址详情说明
				  scale: 1, // 地图缩放级别,整型值,范围从1~28。默认为最大
				  infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
				});
				// uni.navigateTo({
				// 	url: '/pages/subscribe/map?lng='+lng+'&lat='+lat
				// });
			},
			bohaoClick(e){
				uni.makePhoneCall({
					phoneNumber: e
				})
			},
			urlClick(e){
				uni.navigateTo({
					url: '/pages/subscribe/subscribe?shop_id='+e
				});
			},
			getall(){
				let that  = this;
				console.log(that.$api);
				that.$api.shopall({}).then(res=>{
					if(res.code == 1){
						that.list = res.data.list;
						console.log(res);
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
							
				})
			}
		}
	}
</script>

<style lang="less">
	.contactus {
		width: 710rpx;
		margin: auto;
		border-radius: 10rpx;
		
		margin-top: 10rpx;
		.contactus-view {
			width: 100%;
			height: 100%;
			margin-bottom: 80rpx;
			border: 2rpx solid #f9f9f9;
			padding: 10rpx;
			image {
				width: 440rpx;
				height: 400rpx;
				display: block;
				margin: auto;
			}
			.contactus-view-view {
				background-color: #f9f9f9;
				border-radius: 10rpx;
				padding: 20rpx;
				color: #333;
				.contactus-view-view-title {
					padding-bottom: 20rpx;
				}
				.contactus-view-view-v2 {
					font-size: 26rpx;
					padding-bottom: 4rpx;
				}
				.contactus-view-view-v3 {
					display: flex;
					padding-top: 20rpx;
					margin-left: auto;
					text-align: left;
					width: 440rpx;
					.contactus-view-view-v4 {
						width: 150rpx;
						background-color: #0089ff;
						height: 60rpx;
						line-height: 60rpx;
						border-radius: 10rpx;
						color: #fff;
						display: flex;
						margin-left: 8rpx;
						margin-right: 8rpx;
						image {
							display: block;
							width: 40rpx;
							height: 40rpx;
						}
						view {
							width: 80rpx;
						}
					}
					.bohao {
						background-color: #07bc5b;
					}
					.map {
						background-color: #4e6ef2;
					}
				}
			}
			
		}
	}
</style>
<!-- 707070 -->